<template>
  <div class="image-container" :style="{ height: `${listHeight}px`, width: `${listWidth}px` }">
    <div class="filtrate">
      <el-select v-model="form.preferTypes" placeholder="请选择模型类型过滤" multiple clearable ref="itemSelect"
        @change="handleChange">
        <el-option v-for="item in positionType" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="filtrate">
      <el-input v-model="form.name" placeholder="请输入过滤关键字" @input="handleFiltrate"></el-input>
    </div>
    <div v-if="imgArr.length > 0" class="image-list"
      :style="{ height: `${listHeight - 40}px`, width: `${listWidth}px` }">
      <div v-for="(item, index) in imgArr" :key="index" :class="[
        'image-item',
        item.modelId == choseImg.modelId ? 'active' : '',
      ]" @click="handleSelectImage(item)">
        <span class="modelName">{{ item.modelName }}</span>
        <el-image :src="item.imageUrl" :fit="'none'" />
      </div>
    </div>
    <div v-else class="no-list" :style="{ height: `${listHeight - 40}px`, width: `${listWidth}px` }">
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "image-list",
  props: {
    imgArr: {
      type: Array,
      default: () => [],
    },
    choseImg: {
      type: Object,
      default: () => { },
    },
    listHeight: {
      type: Number,
      default: 0,
    },
    listWidth: {
      type: [Number, String],
      default: 400,
    },
    positionType: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showImgArr: [],
      // filtrate: "",
      allImgArr: [],
      // preferTypes: [],
      form: {
        preferTypes: [],
        name: "",
      },
    };
  },
  // watch: {
  //   imgArr: {
  //     handler(val) {
  //       this.allImgArr = val;
  //       this.showImgArr = this.allImgArr;
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  methods: {
    handleSelectImage(item) {
      this.$emit("handleSelectImage", item);
    },
    // 过滤图片列表
    handleFiltrate(value) {
      // this.form.filtrate = value;
      this.handleFindImgItems();
      // this.showImgArr = this.allImgArr.filter((item) => {
      //   // 确保 item.modelName 是一个字符串，如果不是，则将其转换为字符串或直接返回 false
      //   const modelName = item.modelName || "";
      //   return modelName.includes(value);
      // });
    },
    handleChange() {
      this.handleFindImgItems();
    },
    handleFindImgItems() {
      let params = { ...this.form };
      if (this.form.preferTypes.length === 0) {
        delete params.preferTypes;
      }
      if (this.form.name.length === 0) {
        delete params.name;
      }
      if (Object.keys(params).length === 0) {
        params = undefined;
      }
      this.$emit("handleFindImgItems", params);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";

.image-container {
  // width: 180px;
  display: flex;
  flex-direction: column;

  .filtrate {
    height: 36px;
    margin-bottom: 4px;

    .el-select {
      width: 100%;
    }
  }

  .no-list {
    // width: 180px;
    // height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      font-size: 20px;
      font-weight: bold;
      color: $themeColor;
    }
  }

  .image-list {
    // width: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    @include scrollBar2;

    .image-item {
      box-sizing: border-box;
      border: 2px solid #ebeef5;
      border-radius: 4px;
      margin-bottom: 10px;
      width: 100%;
      height: 50px;
      cursor: pointer;
      transition: all 0.3s;
      overflow: hidden;
      position: relative;

      .el-img {
        width: 100%;
        height: 50px;
        display: block;
        object-fit: cover;
      }

      .modelName {
        position: absolute;
        z-index: 2;
        font-size: 18px;
        font-weight: bold;
        color: $themeColor;
      }
    }

    .image-item:hover {
      transform: scale(1.05);
    }

    .active {
      border-color: #da1540;
    }
  }
}
</style>
